<template>
  <a-modal
    v-model="visible"
    :width="600"
    class="edit-modal"
    title="编辑"
    :destroyOnClose="true"
    :centered="true"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="cancel"
    :confirmLoading="confirmLoading"
  >
    <a-form :labelCol="labelCol" :wrapperCol="wrapperCol" class="edit-form" v-if="visible">
      <a-form-item label="品牌" style="margin-bottom: 0;">
        <a-select v-model="mdl.branCodeName" placeholder="请选择">
          <a-select-option v-for="item in brandList" :key="item.id" :value="item.name">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="版型号" style="margin-bottom: 0;">{{ productInfo.modelNumber }}</a-form-item>
      <a-form-item label="样衣号" style="margin-bottom: 0;">{{ productInfo.sampleNo }}</a-form-item>
      <a-form-item label="大货号" style="margin-bottom: 0;">{{ productInfo.spu }}</a-form-item>
      <a-form-item label="主料">
        <a-input v-model="mdl.mainIngredient" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="主料编号" style="margin-bottom: 0;">
        <a-input v-model="mdl.mainIngredientNumber" placeholder="请输入详细地址" />
      </a-form-item>
      <a-form-item label="品类" style="margin-bottom: 0;">{{ productInfo.categoryName }}</a-form-item>
      <a-form-item label="小品名">
        <a-input v-model="mdl.smallName" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="状态" style="margin-bottom: 0;"><a-switch v-model="mdl.isClose"/></a-form-item>
      <a-divider />
      <a-form-item label="合体度" style="margin-bottom: 0;" v-if="productInfo">{{ productInfo.degreeOfFit.valueName }}</a-form-item>
      <!-- 属性 -->
      <a-form-item v-for="item in attributeList" :key="item.id" :labelCol="{ lg: { span: 0 }, sm: { span: 0 } }" :wrapperCol="{ lg: { span: 24 }, sm: { span: 24 } }" style="margin-bottom:0">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.name" v-if="item.name != '合体度'">
          <a-select v-model="item.valueCode" placeholder="请选择">
            <a-select-option v-for="item in item.childList" :key="item.code" :value="item.code">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <template v-if="item.subAttributeList.length > 0">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="subItem.name" v-for="subItem in item.subAttributeList" :key="subItem.code">
            <a-input-number :min="0" style="width:120px" v-model="subItem.valueName" placeholder="请输入" />
          </a-form-item>
        </template>
        <a-divider />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { versionLibQueryDetailDic, versionLibEdit } from '@/api/goods/index'
export default {
  name: 'EditModal',
  data() {
    return {
      visible: false,
      categoryCode: null,
      attrInfo: [],
      productInfo: null,
      mdl: {},
      attributeList: [],
      brandList: [],
      labelCol: { lg: { span: 5 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 15 }, sm: { span: 17 } },
      confirmLoading: false
    }
  },
  methods: {
    async show(productInfo, attrInfo) {
      this.categoryCode = productInfo.categoryCode
      this.attrInfo = attrInfo
      this.productInfo = productInfo
      this.mdl = {
        branCodeName: productInfo.branCodeName,
        mainIngredient: productInfo.mainIngredientName,
        mainIngredientNumber: productInfo.mainIngredientCode,
        isClose: productInfo.isClosed == 0 ? true : false,
        smallName: productInfo.smallName
      }
      await this.getDic()
      this.visible = true
    },
    getDic() {
      let params = {
        requestData: {
          categoryCode: this.categoryCode
        }
      }
      return versionLibQueryDetailDic(params).then(res => {
        if (res.code == 0) {
          this.brandList = res.data.brandList
          let list = res.data.attributeList
          for (let item of list) {
            let result = this.attrInfo.filter(e => e.attrCode == item.code)[0]
            item.valueCode = result.valueCode
            item.valueName = result.valueName
            for (let child of item.subAttributeList) {
              let rech = result.child.filter(e => e.attrCode == child.code)[0]
              child.valueName = rech.valueName
            }
          }
          this.attributeList = res.data.attributeList
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    cancel() {
      this.visible = false
      this.attrInfo = []
      this.productInfo = null
      this.mdl = {}
      this.attributeList = []
      this.brandList = []
      this.$emit('closeEdit')
    },
    handleOk() {
      this.confirmLoading = true
      console.log(this.mdl, this.attributeList)
      let formValue = {}
      for (let item of this.attributeList) {
        if (item.name != '合体度') {
          formValue[item.field] = item.valueCode
        }
        if (item.subAttributeList.length > 0) {
          for (let subItem of item.subAttributeList) {
            formValue[subItem.field] = subItem.valueName
          }
        }
      }
      console.log(formValue)
      let formMdl = JSON.parse(JSON.stringify(this.mdl))
      formMdl.isClose = this.mdl.isClose ? 0 : 1
      formMdl.brandCode = this.brandList.filter(e => e.name == this.mdl.branCodeName)[0].code
      let params = {
        requestData: { ...formMdl, ...formValue, id: this.productInfo.id }
      }
      versionLibEdit(params).then(res => {
        if (res.code == 0) {
          this.$message.success('编辑成功')
          this.cancel()
          this.$emit('updateDetail')
        } else {
          this.$message.warning(res.msg)
        }
        this.confirmLoading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.edit-form {
  max-height: 800px;
  overflow-y: auto;
  /deep/.ant-form-item {
    margin-bottom: 12px;
    label {
      font-weight: bold;
    }
  }
}
</style>

